<template>
    <!--<section class="content" style="height:calc(100% - 5px);">-->
    <div>
      <Row :gutter=12>
        <Col span='7'>
          <Card>
            <div class="box-header">
              <Row class="row header">
                <Col span="1">
                  <div class="img-head pull-left"></div>
                </Col>
                <Col span="9">
                  <div class="box-title pull-left">流量/VoLTE话务量</div>
                  <div class="timeDim" style="float: left"></div>
                  <div class="clear"></div>
                  <div class="biaoxian"></div>
                </Col>
                <Col span="14">
                  <div class="pull-right">
                    基站数:
                    <span id="baseSiteNums"></span>
                    &nbsp;&nbsp;&nbsp;
                    小区数:
                    <span id="cellNums"></span>
                  </div>
                </Col>
              </Row>
              <Row class="row" style="margin-top: 10px;">
                <Col span="6">
                  <div class="head-box">
                    <img src="@/assets/skin/lte/img/icon-2.svg" alt="1" class="img-icon pull-left">
                    <div class="pull-left" style="margin-left: 1%;">
                      <div class="head-h2 head-b">流量</div>
                      <div class="targetHidden" id="province_upoct_percent" title="占全省比例">11</div>
                    </div>
                  </div>
                </Col>
                <Col span="6">
                  <div>
                    <span style='font-size:12px'>环比：</span>
                    <span id="upoct_chain" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                  <div>
                    <span style='font-size:12px'>同比：</span>
                    <span id="upoct_yearOnYear" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                </Col>
                <Col span="6">
                  <div class=" head-box">
                    <img src="@/assets/skin/lte/img/icon-1.png" alt="1" class="img-icon pull-left">
                    <div class="pull-left" style="margin-left: 1%;">
                      <div class="head-h2 head-b">话务量</div>
                      <div class="targetHidden" id="province_volte_voice_traffic_percent" title="占全省比例"></div>
                    </div>
                  </div>
                </Col>
                <Col span="6">
                  <div >
                    <span style='font-size:12px'>环比：</span>
                    <span id="volte_voice_traffic_chain" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                  <div >
                    <span style='font-size:12px'>同比：</span>
                    <span id="volte_voice_traffic_yearOnYear" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                </Col>
              </Row>
            </div>
            <div class="box-body body-h" style="height: 212px;width: 442px;">
              <div class=" h100p" id="line1"></div>
            </div>
          </Card>
        </Col>
        <Col span='10'>
          <Card>
            <div style="padding: 5px;height: 60%;">
              <div class="box h100p" >
                <div class="box-header">
                  <Row class="row header">
                    <Col span="1">
                      <div class="img-header icon-gailan pull-left"></div>
                    </Col>
                    <Col span="4">
                      <Select v-model="this.viewCommon.yemian" :on-change="this.viewCommon.page_query()" class="box-title pull-left" style="border: none"  id="yemian">
                        <Option v-for="item in this.viewCommon.yeMianList" :value="item.value" :key="item.value">
                          {{item.label}}
                        </Option>
                      </Select>
                    </Col>
                    <Col span="13" offset="6">
                      <div class="pull-right">
                        <Button type="primary" class="btn btn-no btn-info btn-sm" :onclick="this.viewCommon.selectExportDate('overview', this.viewCommon.commonParam)">优化清单导出</Button>
                        <Button type="primary" class="btn btn-no btn-info btn-sm" disabled>资源业务</Button>
                        <Button type="primary" class="btn btn-no btn-info btn-sm" :onclick="this.viewCommon.page_swipe('networkoverview2')">关键指标</Button>
                      </div>
                    </Col>
                  </Row>
                </div>
                <div class="box-body  body-center-h" style="position:relative;">
                  <div title="点击返回全省" class="img-header pull-right icon-backToProvince" id="backToProvince" :onclick="this.viewCommon.backToProvince()"></div>
                  <div style="position:absolute;right:10px;bottom: 45px;z-index: 1;">
                    <!--<input  type="button" class="btn btn-no btn-info btn-sm sonOfDiv" id="showFont" value="地理维度" style="width: 80px;display: block;margin-bottom: 5px;" geography=""></input>-->
                    <Button type="primary" class="btn btn-no btn-info btn-sm sonOfDiv" id="showFont" value="地理维度" style="width: 80px;display: block;margin-bottom: 5px;" geography="">地理维度</Button>
                  </div>
                  <div style="position:absolute;right:10px;bottom: 15px;z-index: 1;">
                    <Select v-model="zhishi" :on-change="this.viewCommon.zhiShiChange()" class="btn btn-default btn-sm sonOfDiv" id="zhishi" style="width: 80px; margin-right: 5px;">
                      <Option v-for="item in zhiShiList" :value="item.value" :key="item.value">
                        {{ item.label }}
                      </Option>
                    </Select>
                    <Select v-model="zhanxing" :on-change="this.viewCommon.zhanXingChange()" class="btn btn-default btn-sm sonOfDiv" id="zhanxing" style="width: 80px; margin-right: 5px;">
                      <Option v-for="item in zhanXingList" :value="item.value" :key="item.value">
                        {{ item.label }}
                      </Option>
                    </Select>
                    <Select v-model="shiduan" :on-change="this.viewCommon.shiDuanChange()" class="btn btn-default btn-sm sonOfDiv" id="shiduan" style="width: 80px;">
                      <Option v-for="item in shiDuanList" :value="item.value" :key="item.value">
                        {{ item.label }}
                      </Option>
                    </Select>
                  </div>
                  <div class="h98p" id="map1" style="height: 321px;width: 573px;"></div>
                </div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span="7">
          <Card>
              <div class="box-header">
                <Row class="row header">
                  <Col span="1">
                    <div class="img-head pull-left"></div>
                  </Col>
                  <Col span="12">
                    <div class="box-title pull-left">维护-LTE无线设备可用率</div>
                    <div class="timeDim" style="float: left"></div>
                    <div class="clear"></div>
                    <div class="biaoxian"></div>
                  </Col>
                </Row>
                <Row class="row" style="margin-top: 10px;">
                  <div class="head-box">
                    <div style="margin:0 auto;text-align: center">
                      <div class="head-h1" id="radio_equipment_availability"></div>
                      <div class="targetHidden" id="province_radio_equipment_availability_percent" title="与全省差值"></div>
                    </div>
                  </div>
                </Row>
              </div>
              <div class="box-body body-h">
                <div class=" h100p" id="line3"></div>
              </div>
            </Card>
        </Col>
      </Row>
      <Row :gutter=12>
        <Col span='7'>
          <Card>
            <div class="box-header">
              <Row class="row header">
                <Col span="1">
                  <div class="img-head pull-left"></div>
                </Col>
                <Col span="14">
                  <div class="box-title pull-left">单小区流量/单小区VoLTE话务量</div>
                  <div class="timeDim" style="float: left"></div>
                  <div class="clear"></div>
                  <div class="biaoxian"></div>
                </Col>
              </Row>
              <Row class="row" style="margin-top: 10px;">
                <Col span="6">
                  <div class="head-box">
                    <img src="@/assets/skin/lte/img/icon-5.png" alt="1" class="img-icon pull-left">
                    <!--<span class="head-h2 head-b">流量</span>-->
                    <!--<div class="targetHidden" id="province_upoct_percent" title="占全省比例">11</div>-->
                    <div class="pull-left" style="margin-left: 1%;">
                      <div class="head-h2 head-b">单小区流量</div>
                      <div class="targetHidden" id="province_upoct_aver_percent" title="与全省差值">11</div>
                    </div>
                  </div>
                </Col>
                <Col span="6">
                  <div>
                    <span style='font-size:12px'>环比：</span>
                    <span id="upoct_aver_chain" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                  <div>
                    <span style='font-size:12px'>同比：</span>
                    <span id="upoct_aver_yearOnYear" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                </Col>
                <Col span="6">
                  <div class=" head-box">
                    <img src="@/assets/skin/lte/img/icon-6.png" alt="1" class="img-icon pull-left">
                    <div class="pull-left" style="margin-left: 1%;">
                      <div class="head-h2 head-b">单小区VoLTE话务量</div>
                      <div class="targetHidden" id="province_volte_voice_traffic_aver_percent" title="与全省差值"></div>
                    </div>
                  </div>
                </Col>
                <Col span="6">
                  <div >
                    <span style='font-size:12px'>环比：</span>
                    <span id="volte_voice_traffic_aver_chain" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                  <div >
                    <span style='font-size:12px'>同比：</span>
                    <span id="volte_voice_traffic_aver_yearOnYear" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                </Col>
              </Row>
            </div>
            <div class="box-body body-h">
              <div class=" h100p" id="line5"></div>
            </div>
          </Card>
        </Col>
        <Col span='10'>
          <Card>
            <div class="box-header">
              <Row class="row header">
                <Col span="1">
                  <div class="img-head pull-left"></div>
                </Col>
                <Col span="9">
                  <div class="box-title pull-left">
                    <a class="pull-right" style="font-weight: bold;color: #444;" href="http://10.216.94.67/adhocquery/index" target="_blank">
                      LTE无线利用率/高负荷小区
                    </a>
                  </div>
                  <div class="timeDim" style="float: left"></div>
                  <div class="clear"></div>
                  <div class="biaoxian"></div>
                </Col>
              </Row>
              <Row class="row" style="margin-top: 10px;">
                <Col span="6">
                  <div class="head-box">
                    <img src="@/assets/skin/lte/img/icon-5.png" alt="1" class="img-icon pull-left">
                    <div class="pull-left">
                      <div class="head-h2 head-b">LTE无线利用率</div>
                      <div class="targetHidden" id="province_radio_use_rate_percent" title="与全省差值">11</div>
                    </div>
                  </div>
                </Col>
                <Col span="6">
                  <div>
                    <span style='font-size:12px'>环比：</span>
                    <span id="radio_use_rate_chain" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                  <div>
                    <span style='font-size:12px'>同比：</span>
                    <span id="radio_use_rate_yearOnYear" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                </Col>
                <Col span="6">
                  <div class=" head-box">
                    <img src="@/assets/skin/lte/img/icon-6.png" alt="1" class="img-icon pull-left">
                    <div class="pull-left">
                      <div class="head-h2 head-b">高负荷小区</div>
                      <div class="targetHidden" id="province_high_load_num_percent" title="占全省比例"></div>
                    </div>
                  </div>
                </Col>
                <Col span="6">
                  <div >
                    <span style='font-size:12px'>环比：</span>
                    <span id="high_load_num_chain" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                  <div >
                    <span style='font-size:12px'>同比：</span>
                    <span id="high_load_num_yearOnYear" style="font-size: 12px"></span>
                    <i style="font-size: 12px;font-weight: bold;/* color: rgb(248, 54, 8); */" class="fa"></i>
                  </div>
                </Col>
              </Row>
            </div>
            <div class="box-body body-h">
              <div class=" h100p" id="line4"></div>
            </div>
          </Card>
        </Col>
        <Col span='7'>
          <Card>
            <div class="box-header">
              <Row class="row header">
                <Col span="1">
                  <div class="img-head pull-left"></div>
                </Col>
                <Col span="9">
                  <div class="box-title pull-left">4G客户/万投比</div>
                  <div class="timeDim" style="float: left"></div>
                  <div class="clear"></div>
                  <div class="biaoxian"></div>
                </Col>
                <Col span="14">
                  <div class="pull-right">
                    4G客户DOU：
                    <span id="lte_users_dou"></span>
                  </div>
                </Col>
              </Row>
              <Row class="row" style="margin-top: 10px;">
                <Col span="12">
                  <div class="head-box">
                    <img src="@/assets/skin/lte/img/icon-3.png" alt="1" class="img-icon pull-left">
                    <div class="pull-left" style="margin-left: 13%;">
                      <div class="head-h1" id="lte_users"></div>
                      <div class="targetHidden" id="province_lte_users_percent" title="占全省比例"></div>
                      <div class="head-h2">4G客户(万)</div>
                    </div>
                  </div>
                </Col>
                <Col span="12">
                  <div class=" head-box">
                    <img src="@/assets/skin/lte/img/icon-4.png" alt="1" class="img-icon pull-left">
                    <div class="pull-left" style="margin-left: 9%;">
                      <div class="head-h1" style="text-align: center" id="unlimited_lte_users"></div>
                      <div class="targetHidden" id="province_unlimited_lte_users_percent" title="占全省比例"></div>
                      <div class="head-h2">4G不限量客户数(万)</div>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
            <div class="box-body body-h">
              <div class=" h100p" id="line6"></div>
            </div>
          </Card>
      </Col>
      </Row>
    </div>
    <!--</section>-->
</template>

<script>

import OverView from '@/assets/js/networkoverview.js'
export default OverView
</script>

<style scoped>
  .fa-long-arrow-down:before {
    content: "\f175";
  }
  .fa-long-arrow-up:before {
    content: "\f176";
  }
  .biaoxian{width: 150px;background-color: #00a7d0;height: 1px;position: relative;top:1px;}
  .header{border-bottom:1px #e5e5e5 solid;}
  .box{
    border: none;
    margin-bottom: 0;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
  }
  .box-header{ padding-bottom: 0;}
  .img-head{
    background:no-repeat center;
    background-image: url("../../assets/skin/lte/img/biaoti.png");
    width: 20px;
    height: 20px;
    position: absolute;
  }
  .img-header{
    background:no-repeat center;
    width: 24px;
    height: 24px;
  }
  .icon-backToProvince{
    background-image: url('../../assets/plugins/easyui/css/icons/back.png');position: absolute; z-index: 1;right: 1%
  }
  .icon-gailan{background-image: url("../../assets/skin/lte/img/gailan.png")}
  .img-icon{
    width: 40px;
    height: 40px;
    margin: auto 0;
  }
  .box-header .box-title{
    font-size: 14px!important;
    font-weight: bold;
    margin-bottom: 5px!important;
    margin-left: 2px!important;
    line-height: normal!important;
  }
  .head-h1{font-weight: bold;font-size: 18px;}
  .head-h3{font-weight: bold;font-size: 18px;line-height: 1;}
  .head-h2{font-size: 12px;}
  .head-h4{font-size: 12px;line-height: 1;}
  .head-box{/*width: 200px;padding:5px;*/height: 50px;margin: 0 auto;}
  .h100p{height: 100%;}
  .h50p{height: 50%;}
  .body-h{height: calc(100% - 100px);}
  .body-center-h{height: calc(100% - 30px);}
  .head-b{margin-top: 10px;text-align: center}
  /*font-size: 16px;*/
</style>
